<template>
  <div class="page">
    <navigation>{{ $t('安全中心') }}</navigation>
    <div class="shiming">
      <ul>
        <li>
          <div v-if="auth.user.email != ''">
            <p>{{ $t('邮箱验证') }}</p>
            <div class="value">{{ auth.user.email }}</div>
          </div>
          <nuxt-link v-else to="/user/verify-email">
            <p>{{ $t('邮箱验证') }}</p>
            <i class="iconfont icon-jiantouarrow487"></i>
          </nuxt-link>
        </li>
        <li>
          <div v-if="auth.user.mobile_phone != ''">
            <p>{{ $t('手机号验证') }}</p>
            <div class="value">{{ auth.user.mobile_phone }}</div>
          </div>
          <nuxt-link v-else to="/user/verify-phone">
            <p>{{ $t('手机号验证') }}</p>
            <i class="iconfont icon-jiantouarrow487"></i>
          </nuxt-link>
        </li>
        <li>
          <nuxt-link to="/user/reset-password">
            <p>{{ $t('修改密码') }}</p>
            <i class="iconfont icon-jiantouarrow487"></i>
          </nuxt-link>
        </li>
        <!-- <li>
          <nuxt-link to="/user/verify-google">
            <p>{{ $t('谷歌二次验证') }}</p>
            <i class="iconfont icon-jiantouarrow487"></i>
          </nuxt-link>
        </li> -->
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import navigation from '@/components/Navigation.vue'
export default {
  components: { navigation },
  computed: {
    ...mapState({
      auth: ({ auth }) => auth
    })
  }
}
</script>
<style scoped>
.shiming .value {
  float: right;
  line-height: 50px;
  color: #666666;
}
</style>
